<template>
  <div class="content-wrap">
    <Divider orientation="left">
      <h2 v-if="paperId!=null">新闻详细内容</h2>
      <h2 v-else>编辑新闻内容</h2>
    </Divider>
    <div :class="[paperId!=null?'read-info':'','content']">
      <div class="table-top-info">
        <div class="searchConditio">
          <div class="inline-group">
            <label style="margin-right:6px;">新闻标题</label>
            <Input v-model="currentPaper.title" :disabled="paperId!=null" placeholder="请输入新闻标题..." style="width: 300px" />
          </div>
          <div class="inline-group">
            <label style="margin-right:6px;">新闻类型</label>
            <Select clearable v-model="currentPaper.type" filterable class="inineSelect">
              <Option v-for="item in newsType" :value="item.id" :key="item.id">{{ item.typeName }}</Option>
            </Select>
          </div>
          <div class="inline-group">
            <simpleUpload labelTit="封面图" :tipShow="otipShow" :fileType="oFileType.title" :acceptType="oFileType.type" @uploadSuccess="uploadSucceed" />

          </div>
        </div>
        <div>
          <Button v-if="paperId==null" type="success" @click="toAddPaper" class="m-r-10" :loading="createLoading">确认创建</Button>
          <Button type="warning" to="/">关闭</Button>
        </div>
      </div>
      <!-- 案件信息区域 -->
      <div class="main-paper-info">
        <editor :style="{height:oHeight+'px'}" :htmlContent="ohtml" @blurHandle="getHtmlCon"></editor>
      </div>
    </div>


  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import qs from "qs";
import simpleUpload from "@/components/uploadFile";
import editor from "@/components/editor";
export default {
  data() {
    return {
      createLoading: false,
      newsType: [],
      currentPaper: {
        type: "",
        title: "",
        content:"",
        author:"binggan"
      },
      oFileType: { title: "图片", type: "image/png,image/jpg,image/jpeg,image/gif" },
      otipShow: false,
      tempFile: null, //上传文件临时变量
      ohtml:
        "<p>请输入正文<strong>语雀空间全新上线</strong></p><h2>语雀空间， 助力企业知识管理</h2><p>面向企业或组织，提供全新的体系化知识管理， 让协作更高效，让知识成为企业财富。</p>",
      modal1: false,
      addLoading: false,
      count: 0,
      page: 1,
      pageSize: 10,
      oHeight: 300
    };
  },
  computed: {
    ...mapState(["user", "serviceUrl", "equipTypes"]),
    paperId() {
      console.log(this.$route.params.paperId);
      return this.$route.params.paperId;
    },
    data1() {
      let tempArr = [],
        tempRes = [];
      this.fileUrl.filter(item => {
        tempArr.push({ file: item });
      });
      tempArr.filter((item, index) => {
        item.fileName = this.fileName[index];
        tempRes.push(item);
      });
      return tempRes;
    }
  },
  components: {
    simpleUpload,
    editor
  },
  methods: {
    getNewsTypes() {
      this.$axios.get("/newsType/findAll").then(res => {
        this.newsType = res.data;
      });
    },
    getHtmlCon(html) {
      console.log(html);
      // this.currentPaper.content=html;
    },
    getPaperInfo(paperId) {
      //获取当前案件信息
      let config = {
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      };
      this.$axios
        .post("/legalCase/findById", { id: paperId }, config)
        .then(res => {
          if (res.errorCode == 0) {
            console.log(res);
            this.currentPaper = res.data;
            this.fileUrl = res.data.fileUrl.split("|");
            this.fileName = res.data.fileName.split("|");
          }
        });
    },
    uploadSucceed(fileData) {
      this.tempFile = fileData;
    },
    // getSelectedType(val){
    //   this.currentPaper.typeName=val;
    // },
    cancEdit() {
      this.modal1 = false;
      this.tempFile = null;
      this.otipShow = false;
    },
    toAddPaper() {
      //创建案件
      if (!this.currentPaper.title) {
        this.$Message.error("请输入新闻标题!");
        return false;
      }else if(!this.currentPaper.type){
        this.$Message.error("请选择新闻类型!");
        return false;
      } else {
        this.createLoading = true;
        console.log(this.currentPaper);
        let tempData = JSON.parse(JSON.stringify(this.currentPaper));
        tempData.content=this.ohtml;
        this.tempFile && (tempData.img=this.tempFile.file);
        console.log(this.tempData);
        // let config = {
        //   headers: {
        //     "Content-Type": "application/json;charset=UTF-8"
        //   }
        // };
        this.$axios
          .post("/news/add", qs.stringify(tempData))
          .then(res => {
            console.log(res);
            if (res && res.errorCode == 0) {
              this.$Message.success("创建成功!");
              this.$router.push("/");
            }
            this.createLoading = false;
          })
          .catch(() => {
            this.createLoading = false;
          });
      }
    },
    /* pageQues(page) {
      //切换图符分页
      console.log(page);
      this.page = page;
    }, */
    toAddQuestion() {
      //添加新题目
      this.modal1 = true;
    },
    toDownload(row) {
      console.log(row);
      window.open(this.serviceUrl + row.file);
    }
  },
  created() {
    let paperId = this.$route.params.paperId;
    this.getNewsTypes();
    console.log(paperId);
    if (paperId != null) {
      this.getPaperInfo(paperId);
    }
  },
  mounted() {
    let winHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight; //浏览器高度
    this.oHeight = winHeight - 330;
    console.log(this.oHeight);
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  padding-bottom: 84px;
}
h2 {
  font-size: 20px;
  font-weight: normal;
}

.noMarginBot {
  margin-bottom: 0 !important;
}
</style>
<style lang="scss">
.m-r-10 {
  margin-right: 10px;
}
.read-info .ivu-input[disabled],
fieldset[disabled] .ivu-input {
  color: #5f5d5d;
}
</style>
